<script setup>
import { onMounted, ref } from "vue";
import luckysheet from "luckysheet";
import AnalyesAPI from "@/api/system/analyes.ts";
import { useAnalysetStore } from "@/store/index.ts";
import dayjs from "dayjs";
import {
  filterParallelSamples,
  filterValidSampleAdatas,
  filterValidSamples,
  getHeaders,
  processTableData,
  splitDataIntoPages,
} from "@/utils/method";
import router from "@/router/index";
import indexPdf from "@/components/analysisSheetComponents/waterCapacity/tmpl40/indexPdf.vue";
import LectureAPI from "@/api/system/lecture";
import { getUserInfo } from "@/utils/auth";
import Device from "@/components/analysisSheetComponents/component/Device.vue";

let options = {
  container: "luckysheet", //luckysheet为容器id
  lang: "zh",
  autoCalculate: true,
  data: [
    {
      column: 6, // 列数
      defaultRowHeight: 30, // 自定义行高
      defaultColWidth: 100, // 自定义列宽
      celldata: [
        // 初始化表格数据，第一行包含表头
        { r: 0, c: 0, v: "样品编号" }, // A1
        { r: 0, c: 1, v: "类型" }, // B1
        { r: 0, c: 2, v: "温度(℃)" }, // C1
        { r: 0, c: 3, v: "PH值" }, // D1
        { r: 0, c: 4, v: "最终结果" }, // E1
        { r: 0, c: 5, v: "备注" }, // E1
      ], // 初始化数据
      config: {
        merge: {}, // 合并单元格
        rowlen: {}, // 表格行高
        columnlen: {
          // 设置列宽
          0: 200, // 第一列宽度 150px
          1: 150, // 第二列宽度 120px
          2: 200, // 第三列宽度 180px
          3: 200, // 第四列宽度 100px
          4: 200, // 第五列宽度 200px
          5: 180, // 第六列宽度 150px
        }, // 表格列宽
      },
    },
  ],
  showinfobar: false, // 隐藏信息栏
  showtoolbar: true, // 隐藏工具栏
};

const sheetData = ref("");
const waterForm = ref({
  pxycd: [
    { px_ypbh: "", px_phz: "", px_pjz: "", px_cz: "", px_yxc: "", px_sfhg: "" },
    { px_ypbh: "", px_phz: "", px_pjz: "", px_cz: "", px_yxc: "", px_sfhg: "" },
    { px_ypbh: "", px_phz: "", px_pjz: "", px_cz: "", px_yxc: "", px_sfhg: "" },
    { px_ypbh: "", px_phz: "", px_pjz: "", px_cz: "", px_yxc: "", px_sfhg: "" },
  ],
  bzycd: [{ bz_byph: "", bz_cdjg: "", bz_bzz: "", bz_sfhg: "" }],
  bzhcyllz: {},
  cdz: {},
  device: {
    device_name: [],
    device_model: [],
    device_number: [],
  },
});
const checkTime = ref("");
const processedData = ref([]);
const cdatas = ref([]);
const checkDialogVisible = ref(false);
const analyseStatusPage = useAnalysetStore();
const record_sn = analyseStatusPage.waterForm.record_sn;
const showTargetPage = ref(false);
const tableHeaders = ref([]);
const tabler = ref([]);
const drawer2 = ref(false);
const sampleSnList = ref([]);
const switchAdd = ref(true);

// 用于获取最新的表格数据
const getUpdatedData = () => {
  checkDialogVisible.value = true;
};
const handleCheckClose = () => {
  checkDialogVisible.value = false;
};

// 获取工作表信息
const getWaterCapacity = () => {
  let json = {
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    task_id: analyseStatusPage.waterForm.taskId,
    // id: 25,
    record_sn: record_sn,
    // record_sn: 40,
  };
  AnalyesAPI.getAnalyseACapacity(json).then((data) => {
    console.log("获取水质容量 A单", data);
    if (!Array.isArray(data) || data.length !== 0) {
      waterForm.value = data;
      sheetData.value = data.configs;
      options.data = sheetData.value;
      processedData.value = data.adatas;
      luckysheet.create(options);

      //处理adata到pdf
      tableHeaders.value = splitDataIntoPages(data.adatas, 15);
      tabler.value = getHeaders(data.adatas, 7);
    }
  });
};

// 保存新增表单
const handleAddWaterPh = () => {
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  const data = options.data[0].data.map((row) => {
    return row
      .map((cell) => {
        return cell
          ? {
              field: cell.m || "默认字段",
              value: cell.v || null,
            }
          : null;
      })
      .filter((cell) => cell !== null); // 删除 null 值
  });
  processedData.value = filterValidSampleAdatas(processTableData(data));
  cdatas.value = filterValidSamples(transformData(processedData.value));
  if (waterForm.value.check_status !== undefined) {
    delete waterForm.value.check_status;
    delete waterForm.value.reviewer_id;
  }
  AnalyesAPI.addWaterCapacity({
    ...waterForm.value,
    record_sn: record_sn,
    // record_sn: 40,
    task_id: analyseStatusPage.waterForm.taskId,
    configs: sheetData.value,
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    adatas: processedData.value,
    cdatas: cdatas.value,
  }).then((data) => {
    console.log("调接口拿数据", data);
    ElMessage.success("保存成功");
    switchAdd.value = false;
  });
};

// 处理cdatas数据
function transformData(inputArray) {
  return inputArray.map((item) => ({
    sample_sn: String(item["样品编号"]),
    type: String(item["类型"]),
    cdjg: String(item["最终结果"]),
  }));
}

// 确认提交校核
const handleSubmit = () => {
  if (switchAdd.value) {
    // 调用保存接口
    handleAddWaterPh();
  }
  const formattedDate = checkTime.value
    ? dayjs(checkTime.value).format("YYYY-MM-DD")
    : "";
  console.log(analyseStatusPage.waterForm.id);
  AnalyesAPI.handleCheckTimeData({
    id: analyseStatusPage.waterForm.add_form_id,
    submit_date: formattedDate,
  }).then((data) => {
    ElMessage.success("提交成功！");
    checkDialogVisible.value = false;
    // 获取表单信息
    getWaterCapacity();
  });
};

// 更新avgValues的函数
const updateAvgValues = (index) => {
  if (index === 1) {
    waterForm.value.pxycd[0].px_pjz = calcAverage(0, 1); // 更新第0个索引的平均值
    waterForm.value.pxycd[0].px_cz = calcDiff(0, 1); // 更新第0个索引的平均值
  } else if (index === 3) {
    waterForm.value.pxycd[2].px_pjz = calcAverage(2, 3); // 更新第2个索引的平均值
    waterForm.value.pxycd[2].px_cz = calcDiff(2, 3); // 更新第2个索引的平均值
  }
};

// 计算平均值
function calcAverage(index1, index2) {
  const ph1 = parseFloat(waterForm.value.pxycd[index1]?.px_phz) || 0;
  const ph2 = parseFloat(waterForm.value.pxycd[index2]?.px_phz) || 0;
  return ((ph1 + ph2) / 2).toFixed(2);
}

// 计算差值
function calcDiff(index1, index2) {
  const ph1 = parseFloat(waterForm.value.pxycd[index1]?.px_phz) || 0;
  const ph2 = parseFloat(waterForm.value.pxycd[index2]?.px_phz) || 0;
  return Math.abs(ph1 - ph2).toFixed(2);
}

const handlePageList = () => {
  router.push({ path: "/analyse/sample-analysis" });
};

// 下载
const downloadDetail = async () => {
  showTargetPage.value = true;
  await nextTick();
  window.print();
  setTimeout(() => {
    showTargetPage.value = false;
  }, 1000);
};

const handleSwitchdrawer = () => {
  let json = {
    task_id: analyseStatusPage.waterForm.taskId,
    // sampling_date: waterForm.value.sampling_time,
    category_id: analyseStatusPage.waterForm.tableItem.sample_category_id,
    test_parms: analyseStatusPage.waterForm.tableItem.test_parms,
    test_category: analyseStatusPage.waterForm.test_category,
  };
  AnalyesAPI.getSamplesn(json).then((res) => {
    drawer2.value = true;
    console.log(res);
    sampleSnList.value = res;
  });
};

let userInfo = JSON.parse(getUserInfo()); //当前用户信息
const auditList = ref([]); // 审核人数组
const issuedList = ref([]); // 签发人数组
const issuedDialogVisible = ref(false); // 控制校核弹框
const auditDialogVisible = ref(false); // 选择审核人的弹框
const isauditDialogVisible = ref(false); // 审核的弹框
const issuedPersonDialogVisible = ref(false); // 选择签发人的弹框
const suedDialogVisible = ref(false); // 提交签发的弹框
const issuedUserId = ref(""); // 选择审核人样式
const issuedUserName = ref(""); // 选择审核人样式
const activeUserId = ref(""); // 选择签发人样式
let editPersonnelList = ref([]); // 编辑人员
let ypbhOptions = ref([]); // 编辑人员
// 校核
const issuedForm = ref({
  add_form_id: analyseStatusPage.waterForm.add_form_id,
  check_content: "",
  result: "",
});
// 审核
const isauditForm = ref({
  add_form_id: analyseStatusPage.waterForm.add_form_id,
  review_content: "",
  result: "",
});
// // 签发
// const isauditPersonForm = ref({
//   add_form_id: analyseStatusPage.waterForm.add_form_id,
//   check_content: '',
//   result: '',
// })

// 校核结果
const handleIssuedSubmit = () => {
  AnalyesAPI.handleCheckRecord(issuedForm.value).then((data) => {
    ElMessage.success("提交成功");
    issuedDialogVisible.value = false;
    // 获取表单信息状态
    getWaterCapacity();
  });
};

// 打开校核弹框
const openSubmitAuditClose = () => {
  issuedDialogVisible.value = true;
};

// 关闭校核弹框
const handleSubmitAuditClose = () => {
  issuedDialogVisible.value = false;
};

// 打开选择审核人弹框
const openAuditClose = () => {
  LectureAPI.getCheckStaff({ group: "22" }).then((data) => {
    auditList.value = data.filter((user) => user.id !== userInfo.id);
    console.log("审核人", auditList.value);
    auditDialogVisible.value = true;
  });
};

// 关闭选择审核人弹框
const handleAuditClose = () => {
  auditDialogVisible.value = false;
};

// 关闭审核弹框
const openAuditOutcomeClose = () => {
  isauditDialogVisible.value = true;
};

// 关闭审核弹框
const handleAuditOutcomeClose = () => {
  isauditDialogVisible.value = false;
};

// 关闭选择签发人弹框
const openIssuedPersonClose = () => {
  issuedPersonDialogVisible.value = true;
};

// 关闭选择签发人弹框
const handleIssuedPersonClose = () => {
  issuedPersonDialogVisible.value = false;
};

// 关闭签发结果
const openSuedPersonClose = () => {
  suedDialogVisible.value = true;
};

// 关闭选择签发人弹框
const handleSuedPersonClose = () => {
  suedDialogVisible.value = false;
};

// 选择审核人
const toggleIssuedSelection = (id, name) => {
  issuedUserId.value = id;
  issuedUserName.value = name;
};

// 选择签发人
const toggleSelection = (id) => {
  activeUserId.value = id;
};

// 提交审核人
const handleSubmitAudit = () => {
  let json = {
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    user_ids: issuedUserId.value,
    usernames: issuedUserName.value,
  };
  AnalyesAPI.handleAddReviewer(json).then((res) => {
    console.log(res);
    if (res == 1) {
      ElMessage.success("提交成功！");
      auditDialogVisible.value = false;
      // 获取表单信息状态
      getWaterCapacity();
    }
  });
};

// 确认审核结果
const handleAuditOutcomeSubmit = () => {
  AnalyesAPI.handleReviewRecord(isauditForm.value).then((res) => {
    ElMessage.success("审核成功");
    isauditDialogVisible.value = false;
    // 获取表单信息状态
    getWaterCapacity();
  });
};

// 提交签发人
const handleIssuedPersonSubmit = () => {};

// 提交签发结果
const handleIssuedOutcomeSubmit = () => {};

// 获取信息
const getMethod = () => {
  waterForm.value.task_name = analyseStatusPage.waterForm.task_number; //任务名称
  waterForm.value.method = analyseStatusPage.waterForm.tableItem.test_method
    ? analyseStatusPage.waterForm.tableItem.test_method
    : analyseStatusPage.waterForm.tableItem.test_method_number; //分析方法
  waterForm.value.category_id =
    analyseStatusPage.waterForm.tableItem.sample_category; // 样品类别
  editPersonnelList.value = analyseStatusPage.waterForm.tableItem.analysis_uids
    .split(",")
    .map(Number);
  checkTime.value = analyseStatusPage.waterForm.tableItemList.submit_dates;
};

// 控制保存的按钮
const saveShowButton = computed(() => {
  const checkStatus =
    waterForm.value.check_status !== undefined
      ? waterForm.value.check_status
      : analyseStatusPage.waterForm.tableItemList.check_statuses;
  return (
    editPersonnelList.value.includes(userInfo.id) &&
    (checkStatus === 0 || checkStatus === 2 || checkStatus === 5)
  );
});

// 控制校核的按钮
const shouldShowButton = computed(() => {
  return (
    analyseStatusPage.waterForm.tableItem.check_uid === userInfo.id &&
    waterForm.value.check_status === 1
  );
});

// 控制提交审核的按钮
const submitShowButton = computed(() => {
  return (
    analyseStatusPage.waterForm.tableItem.check_uid === userInfo.id &&
    waterForm.value.check_status === 3
  );
});

// 控制审核的按钮
const auditShowButton = computed(() => {
  return (
    waterForm.value.reviewer_id == userInfo.id &&
    waterForm.value.check_status === 4
  );
});

// 在组件挂载后初始化 Lucky-sheet
onMounted(() => {
  console.log(analyseStatusPage.waterForm.tableItemList.check_statuses);
  // 初始化表格
  luckysheet.create(options);
  // 获取表单信息
  getWaterCapacity();
  // 获取方法
  getMethod();
});

const handleSelectChange = () => {
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  const data = options.data[0].data.map((row) => {
    return row
      .map((cell) => {
        return cell
          ? {
              field: cell.m || "默认字段",
              value: cell.v || null,
            }
          : null;
      })
      .filter((cell) => cell !== null); // 删除 null 值
  });
  ypbhOptions.value = filterParallelSamples(
    filterValidSampleAdatas(processTableData(data))
  );
};

function handleChange(item) {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = ypbhOptions.value.find(
    (option) => option.sampleNumber === item.px_ypbh
  );

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.px_phz = selectedOption.finalResult;
  }
}
</script>

<template>
  <div class="card">
    <div v-show="!showTargetPage">
      <el-card class="box-card">
        <h1 style="text-align: center">水质 PH分析原始记录</h1>
        <div>SXLPHJ/JL/CX-22-40</div>
        <table class="table">
          <tr style="background-color: #f2f2f2">
            <td>任务编号</td>
            <td>
              <el-input
                v-model="waterForm.task_name"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>采样日期</td>
            <td>
              <el-input
                v-model="waterForm.sampling_time"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>分析日期</td>
            <td>
              <el-input
                v-model="waterForm.anal_time"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td>分析方法</td>
            <td colspan="3">
              <el-input
                v-model="waterForm.method"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>样品类别</td>
            <td>
              <el-input
                v-model="waterForm.category_id"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <!--          选择仪器组件-->
          <Device :water-form="waterForm" />
          <tr>
            <td>温度补偿</td>
            <td>
              <el-input
                v-model="waterForm.temperature_bc"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              >
                <template #append>
                  <span style="background-color: transparent; color: black">
                    ℃
                  </span>
                </template>
              </el-input>
            </td>
            <td>环境温度</td>
            <td>
              <el-input
                v-model="waterForm.temperature"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              >
                <template #append>
                  <span style="background-color: transparent; color: black">
                    ℃
                  </span>
                </template>
              </el-input>
            </td>
            <td>环境湿度</td>
            <td>
              <el-input
                v-model="waterForm.humidity"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              >
                <template #append>
                  <span style="background-color: transparent; color: black">
                    %RH
                  </span>
                </template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td colspan="6">
              <div class="table-td">标准缓冲溶液校准</div>
            </td>
          </tr>
          <tr>
            <td colspan="3">标准缓冲溶液理论值</td>
            <td>
              <el-input
                v-model="waterForm.bzhcyllz.bzhcyllz_1"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bzhcyllz.bzhcyllz_2"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bzhcyllz.bzhcyllz_3"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="3">测定值</td>
            <td>
              <el-input
                v-model="waterForm.cdz.cdz_1"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.cdz.cdz_2"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.cdz.cdz_3"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
        </table>
        <div id="luckysheet" style="width: 100%; height: 500px" />
        <table class="table">
          <tr>
            <td colspan="6">
              <div class="table-td">平行样测定</div>
            </td>
          </tr>
          <tr>
            <td>样品编号</td>
            <td>PH值</td>
            <td>平均值</td>
            <td>差值(PH单位)</td>
            <td>允许差(PH单位)</td>
            <td>是否合格</td>
          </tr>
          <tr v-for="(item, index) in waterForm.pxycd" :key="index">
            <td>
              <el-select
                v-model="item.px_ypbh"
                placeholder="请选择"
                style="width: 100%; border: 1px solid transparent"
                filterable
                allow-create
                default-first-option
                @focus="handleSelectChange"
                @change="handleChange(item)"
              >
                <el-option
                  v-for="(option, index) in ypbhOptions"
                  :key="index"
                  :label="option.sampleNumber"
                  :value="option.sampleNumber"
                />
              </el-select>
            </td>
            <td>
              <el-input
                v-model="item.px_phz"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
                @blur="updateAvgValues(index)"
              />
            </td>
            <td v-if="index === 0 || index === 2" rowspan="2">
              <el-input
                v-model="item.px_pjz"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td v-if="index === 0 || index === 2" rowspan="2">
              <el-input
                v-model="item.px_cz"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td v-if="index === 0 || index === 2" rowspan="2">
              <el-input
                v-model="item.px_yxc"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td v-if="index === 0 || index === 2" rowspan="2">
              <el-input
                v-model="item.px_sfhg"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="6">
              <div class="table-td">标准样品测定</div>
            </td>
          </tr>
          <tr>
            <td colspan="2">标样批号</td>
            <td colspan="2">测定结果</td>
            <td>标准值</td>
            <td>是否合格</td>
          </tr>
          <tr v-for="(item, index) in waterForm.bzycd" :key="index">
            <td colspan="2">
              <el-input
                v-model="item.bz_byph"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="2">
              <el-input
                v-model="item.bz_cdjg"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="item.bz_bzz"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="item.bz_sfhg"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2">备注</td>
            <td colspan="4">
              <el-input
                v-model="waterForm.notes"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
        </table>
      </el-card>
    </div>
    <div v-show="showTargetPage">
      <indexPdf
        :waterForm="waterForm"
        :tableHeaders="tableHeaders"
        :tabler="tabler"
      />
    </div>
    <el-card v-show="!showTargetPage" class="box-card" style="margin-top: 30px">
      <div style="display: flex; justify-content: space-between">
        <!--        占位盒子-->
        <div>
          <!--          <el-button @click="handleSwitchdrawer">-->
          <!--            样品编号-->
          <!--          </el-button>-->
        </div>
        <div>
          <el-button @click="handlePageList">取消</el-button>
          <!--          <el-button>新增</el-button>-->
          <!--          <el-button>复制并新增</el-button>-->
          <el-button v-show="saveShowButton" @click="handleAddWaterPh">
            保存
          </el-button>
          <el-button
            v-show="saveShowButton"
            type="primary"
            @click="getUpdatedData"
          >
            提交
          </el-button>
          <el-button
            v-show="shouldShowButton"
            type="primary"
            @click="openSubmitAuditClose"
          >
            校核
          </el-button>
          <el-button
            v-show="submitShowButton"
            type="primary"
            @click="openAuditClose"
          >
            提交
          </el-button>
          <el-button
            v-show="auditShowButton"
            type="primary"
            @click="openAuditOutcomeClose"
          >
            审核
          </el-button>
          <!--          <el-button type="primary" @click="openIssuedPersonClose">提交签发人</el-button>-->
          <!--          <el-button type="primary" @click="openSuedPersonClose">签发</el-button>-->
          <el-button type="primary" @click="downloadDetail">下载</el-button>
        </div>
      </div>
    </el-card>
    <!--    提交校核-->
    <el-dialog
      v-model="checkDialogVisible"
      title="提交校核"
      width="30%"
      center
      :before-close="handleCheckClose"
    >
      <div class="check">
        <!--        头部-->
        <div
          class="check-header"
          style="display: flex; align-items: center; margin-bottom: 20px"
        >
          <p>表单填写日期：</p>
          <el-date-picker
            v-model="checkTime"
            style="border: 1px solid #cccccc; border-radius: 6px; width: 70%"
            type="date"
            placeholder="请选择"
          />
        </div>
        <div class="check-footer">
          <el-button style="width: 48%" @click="handleCheckClose">
            取消
          </el-button>
          <el-button type="primary" style="width: 48%" @click="handleSubmit">
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!--   样品编号-->
    <el-drawer v-model="drawer2" direction="rtl">
      <template #header>
        <h2 style="color: #000">相关采样样品编号</h2>
      </template>
      <el-table border style="width: 100%" :data="sampleSnList">
        <el-table-column label="序号">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="sample_sn" label="样品编号" />
        <el-table-column prop="sampling_date" label="采样时间" />
      </el-table>
    </el-drawer>
    <!--    提交校核-->
    <el-dialog
      v-model="issuedDialogVisible"
      title="提交校核"
      :before-close="handleSubmitAuditClose"
      :show-close="false"
      width="30%"
      center
    >
      <div class="check">
        <!--        头部-->
        <div class="check-center">
          <div style="display: flex; align-items: center; margin-bottom: 10px">
            校核结果：
            <el-radio-group v-model="issuedForm.result">
              <el-radio value="1" size="large">同意</el-radio>
              <el-radio value="0" size="large">拒绝</el-radio>
            </el-radio-group>
          </div>
          <div
            v-show="issuedForm.result === '0'"
            style="margin-top: 20px; width: 100%"
          >
            <el-form>
              <el-form-item label="拒绝原因：">
                <el-input
                  v-model="issuedForm.check_content"
                  :rows="2"
                  type="textarea"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="check-footer">
          <el-button style="width: 48%" @click="handleSubmitAuditClose">
            取消
          </el-button>
          <el-button
            type="primary"
            style="width: 48%"
            @click="handleIssuedSubmit"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!--    选择审核人-->
    <el-dialog
      v-model="auditDialogVisible"
      title="选择审核人"
      :before-close="handleAuditClose"
      :show-close="false"
      width="30%"
      center
    >
      <div class="check">
        <!--        头部-->
        <div class="check-center">
          <div
            v-for="(item, index) in auditList"
            :key="index"
            class="check-center-item"
            :class="{ 'check-active': item.id === issuedUserId }"
            @click="toggleIssuedSelection(item.id, item.username)"
          >
            {{ item.username }}
            <div v-if="item.id === issuedUserId" class="check-icon">
              <svg-icon icon-class="confirm" size="16" />
            </div>
          </div>
        </div>
        <div class="check-footer">
          <el-button style="width: 48%" @click="handleAuditClose">
            取消
          </el-button>
          <el-button
            type="primary"
            style="width: 48%"
            @click="handleSubmitAudit"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!--    审核结果-->
    <el-dialog
      v-model="isauditDialogVisible"
      title="提交审核"
      :before-close="handleAuditOutcomeClose"
      :show-close="false"
      width="30%"
      center
    >
      <div class="check">
        <!--        头部-->
        <div class="check-center">
          <div style="display: flex; align-items: center; margin-bottom: 20px">
            审核结果：
            <el-radio-group v-model="isauditForm.result">
              <el-radio value="1" size="large">同意</el-radio>
              <el-radio value="0" size="large">拒绝</el-radio>
            </el-radio-group>
          </div>
          <div v-show="isauditForm.result === '0'" style="margin-top: 20px">
            <el-form>
              <el-form-item label="拒绝原因：">
                <el-input
                  v-model="isauditForm.review_content"
                  :rows="2"
                  type="textarea"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="check-footer">
          <el-button style="width: 48%" @click="handleAuditOutcomeClose">
            取消
          </el-button>
          <el-button
            type="primary"
            style="width: 48%"
            @click="handleAuditOutcomeSubmit"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!--    选择签发人-->
    <el-dialog
      v-model="issuedPersonDialogVisible"
      title="选择签发人"
      :before-close="handleIssuedPersonClose"
      :show-close="false"
      width="30%"
      center
    >
      <div class="check">
        <!--        头部-->
        <div class="check-center">
          <div
            v-for="(item, index) in auditList"
            :key="index"
            class="check-center-item"
            :class="{ 'check-active': item.id === activeUserId }"
            @click="toggleSelection(item.id)"
          >
            {{ item.username }}
            <div v-if="item.id === activeUserId" class="check-icon">
              <svg-icon icon-class="confirm" size="16" />
            </div>
          </div>
        </div>
        <div class="check-footer">
          <el-button style="width: 48%" @click="handleIssuedPersonClose">
            取消
          </el-button>
          <el-button
            type="primary"
            style="width: 48%"
            @click="handleIssuedPersonSubmit"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!--    审核结果-->
    <!--    <el-dialog title="提交签发" v-model="suedDialogVisible" :before-close="handleSuedPersonClose"-->
    <!--               :show-close="false"-->
    <!--               width="30%" center>-->
    <!--      <div class="check">-->
    <!--        &lt;!&ndash;        头部&ndash;&gt;-->
    <!--        <div class="check-center">-->
    <!--          <div style="display: flex;align-items: center;margin-bottom: 20px">-->
    <!--            签发结果：-->
    <!--            <el-radio-group v-model="isauditPersonForm.result">-->
    <!--              <el-radio value="1" size="large">同意</el-radio>-->
    <!--              <el-radio value="0" size="large">拒绝</el-radio>-->
    <!--            </el-radio-group>-->
    <!--            <div style="margin-top: 20px" v-show="isauditPersonForm.result === '0'">-->
    <!--              <el-form>-->
    <!--                <el-form-item label="拒绝原因：">-->
    <!--                  <el-input-->
    <!--                      v-model="isauditPersonForm.check_content"-->
    <!--                      :rows="2"-->
    <!--                      type="textarea"-->
    <!--                  />-->
    <!--                </el-form-item>-->
    <!--              </el-form>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="check-footer">-->
    <!--          <el-button style="width: 48%;" @click="handleSuedPersonClose">取消</el-button>-->
    <!--          <el-button type="primary" style="width: 48%;" @click="handleIssuedOutcomeSubmit">确认</el-button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>
</template>

<style scoped lang="scss">
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
  justify-content: center;
}

.check {
  padding: 0 20px;

  &-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  &-header {
    color: #ff7e00;
  }

  &-active {
    background-color: #f1f4ff;
    border-color: #6486ff !important;
    color: #4551ff;
  }

  &-icon {
    position: absolute;
    top: -8px;
    right: -6px;
  }

  &-center {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;

    &-item {
      position: relative;
      border: 1px solid #bbb;
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      margin: 10px;
      padding: 5px 20px;
    }
  }
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  flex-direction: row-reverse;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input.is-disabled .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}
</style>
